<template>
  <div class="pt-2 pb-36 px-2">
    <Item
      v-for="(itemData, index) in data"
      :data="itemData"
      :index="index"
      @reply="handleReply"
      @operate="handleOperate"
    />
    <Pager v-if="total > 0" />
    <Reply v-if="total > 0" ref="replyForm" />
    <el-empty v-else description="无数据" />
    <Operator ref="operatorForm" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import useViewStore from '@/stores/view.js'
import exampleData from './example1.json'
import Item from './Item.vue'
import Pager from './Pager.vue'
import Reply from './Reply.vue'
import Operator from './Operator.vue'

const viewStore = useViewStore()

const data = computed(() => viewStore.data)
const total = computed(() => viewStore.total)

const replyForm = ref()
const handleReply = (dataID) => {
  replyForm.value.open(dataID)
}

const operatorForm = ref()
const handleOperate = (dataID) => {
  operatorForm.value.open(dataID)
}

onMounted(() => {
  // viewStore.load()
})
</script>
